<template>
  <div>
    <van-search
  v-model="value"
  show-action
  placeholder="请输入搜索关键词"
  @search="onSearch"
>
  <template #action>
    <div @click="onSearch">搜索</div>
  </template>
</van-search>
<div class="qqq">
  <h5>历史记录:</h5>
  <van-icon size="20" name="delete" @click="remove"/>
</div>

<van-tag type="primary"
 v-for="(item,index) in history"
 :key="index"
v-show="index<9">
{{item}}
</van-tag>
  </div>
</template>

<script>
export default {
  data(){
    return{
      value:"",
      history:JSON.parse(localStorage.getItem("history")) || [],
    }
  },
  methods:{
    onSearch(){
      if(this.history.includes(this.value)){
        this.value = [];
      }else{
this.history.unshift(this.value);
       localStorage.setItem("history",JSON.stringify(this.history))
       this.$router.push({path:"/About",query:{value:this.value}})
      }
       
    },
    remove(){
      this.history = [],
      localStorage.removeItem('history');
    }
  }
}
</script>

<style>
.qqq{
  height: 6vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>